let { table, $, form, layer } = layui;

export default class userManage {
    constructor() {
        this.render();
        this.handle();
    }

    render() {
        let template = ` 
        <table id="userTable" lay-filter="userTable"></table>
        <script type="text/html" id="tools">
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </div>
                <!-- type -->
                <div class="layui-input-inline type">
                <select name="type" >
                    <option value="username">用户名</option>
                    <option value="password">密码</option>
                    <option value="phone">电话号码</option>
                    <option value="email">邮箱</option>
                </select>
              </div>
              <!-- value -->
              <div class="layui-input-inline value">
                  <input type="text" name="value" placeholder="请输入搜索条件" class="layui-input">
              </div>
              <div class="layui-input-inline">
                  <button type="button" lay-event="search" class="layui-btn layui-btn-primary layui-btn-sm">
                      <i class="layui-icon">&#xe615;</i>
                  </button>
              </div>
              </div>
            </form>
        </script>
    
        <script type="text/html" id="userBar">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
   
        `;
        $("#content").html(template);//content是manage.js中的<!-- 内容主体区域 -->

    }
    handle() {
        table.render({
            elem: '#userTable'
            , height: 312
            , url: '/users' //数据接口
            , page: true //开启分页

            //用于对分页请求的参数
            , request: {
                pageName: 'current' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , parseData: function (res) { //res 即为原始返回的数据
                console.log("res" + res);
                return {
                    "code": 0,//解析接口状态
                    "count": res.total, //解析数据长度
                    "data": res.rows //解析数据列表
                };
            }
            // ,limit:10//每页显示的条数，默认为10
            , limits: [3, 5, 10, 15, 20]//可以选择每页显示多少条
            , toolbar: "#tools"//toolbar - 绑定工具条模板 //数据表格->头工具栏事件
            , cols: [[ //表头
                { field: 'username', title: '用户名' }
                , { field: 'password', title: '密码' }
                , { field: 'phone', title: '电话号码' }
                , { field: 'email', title: '邮箱' }
                , { fixed: 'right', width: 150, align: 'center', toolbar: '#userBar' }

            ]]
        });
        //表格触发事件
        //新增
        table.on('toolbar(userTable)', function (obj) {
            //增加用户
            if (obj.event == "add") {
                //弹出层
                layer.open({
                    type: 1,
                    title: '增加用户',
                    btn: ["确定新增", "取消"],
                    area: ['400px', '300px'],
                    //确定回调函数
                    yes: function (index) {
                        //获取表单内容
                        console.log(form.val('addForm'));//给表单赋值的方法
                        $.ajax({
                            type: "post",
                            url: "/users",//路由的路径里面的新增路径
                            data: form.val('addForm'),
                            success() {
                                table.reload("userTable");//新增完直接就能渲染到表格中
                                layer.close(index);//关闭
                            }
                        });
                    },
                    //新增表单框
                    content: `
                        <form class="layui-form"  lay-filter="addForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                              <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                              autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                             <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                            <input type="text" name="password" required lay-verify="required" placeholder="请输入密码"
                                autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">电话号码</label>
                            <div class="layui-input-block">
                            <input type="text" name="phone" required lay-verify="required" placeholder="请输入电话号码"
                            autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                           <label class="layui-form-label">邮箱</label>
                           <div class="layui-input-block">
                           <input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱"
                           autocomplete="off" class="layui-input">
                           </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">选择框</label>
                        <div class="layui-input-block">
                        <input type="radio" name="privilege" value="1" title="管理员">
                        <input type="radio" name="privilege" value="0" title="普通用户">
                        </div>
                        </div>
                        </form>
                        `
                });
                layui.use('form', function(){
                    var form = layui.form;
                    form.render();
                });

            }
            else if (obj.event == 'search') {

                console.log(form.val('searchForm'));
                table.reload('userTable', {
                    where: form.val('searchForm'),
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });

            }
        });
        //删除事件
        table.on('tool(userTable)', function (obj) {//工具条事件,行工具条事件
            console.log(obj);
            if (obj.event == "del") {
                //删除学生
                //弹出层确定事件
                layer.confirm('确定删除？', function (index) {
                    $.ajax({
                        type: "delete",
                        url: "/users/" + obj.data._id,
                        success() {
                            table.reload('userTable');//删除之后刷新页面，表格重载方法
                            layer.close(index);
                        }
                    });
                });
                //修改编辑部分
            } else if (obj.event == 'edit') {
                //弹出层
                layer.open({
                    type: 1,
                    title: '修改用户信息',
                    btn: ['确定修改', '取消'],
                    area: ['400px', '300px'],
                    //确定回调函数
                    yes: function (index) {
                        $.ajax({
                            type: "put",
                            url: "/users/" + obj.data._id,
                            //数据在后台修改成功，但是不能显示在页面上，这里运用扩展运算符
                            data: {
                                ...form.val('updateForm')//扩展运算符，赋值
                            },
                            success() {
                                table.reload("userTable");
                                layer.close(index);
                            }
                        });

                    },
                    //按照id去查询要修改的人，并且回填到表单里面去
                    success: function () {
                        form.render();//渲染单选框
                        $.ajax({
                            type: "get",
                            url: "/users/" + obj.data._id,
                            success(res) {
                                form.val('updateForm', res);//表单取值
                            }
                        });
                    },
                    content: `
                        <form class="layui-form" lay-filter="updateForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input
                                    type="text"
                                    name="username"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入用户名"
                                    autocomplete="off"
                                    class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input
                                    type="text"
                                    name="password"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入密码"
                                    autocomplete="off"
                                    class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电话号码</label>
                            <div class="layui-input-block">
                                <input
                                    type="text"
                                    name="phone"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入电话号码"
                                    autocomplete="off"
                                    class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-block">
                                <input
                                    type="text"
                                    name="email"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入邮箱"
                                    autocomplete="off"
                                    class="layui-input"
                                />
                            </div>
                        </div>
                    </form>
                        `
                });
            }
        });
        
    }
   
}